const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js', //入口
    mode: 'production', //模式
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: '[name].[contenthash].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                // 使用options给babel-loader传递选项
                options: {
                    // babel预设，即预设里面整合了很多插件
                    presets: ['@babel/preset-env']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                // https://webpack.docschina.org/guides/asset-modules/
                // webpack5特有的，webpack5之前使用url-loader
                type: 'asset/inline'
                // exclude: /node_modules/,
                // use: [
                //   {
                //     loader: 'url-loader',
                //     options: {
                //         name: '[name].[ext]',
                //         limit: 500,
                //         outputPath: 'images/',
                //         esModule:false
                //     }
                //   }
                // ]
             },
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: '', 
            template: path.resolve(__dirname, '../public/index.html')
        })
    ]

}